<template>
  <div class="info">
    <!-- <div class="title">
      教师号：201；考试科目：高低压设备；应到：<span>20</span>人；
      实到<span>20</span>人。
    </div> -->
    <div class="selectr">
      选择教室：
      <el-cascader
        ref="clroom"
        v-model="classroom"
        placeholder="试试搜索：101"
        :options="options"
        clearable
        :props="SetKesDept"
        @change="elect"
      ></el-cascader>
      &nbsp; &nbsp; {{ $store.state.pxswitch ? "培训" : "考试" }}场次：
      <el-select
        ref="mark"
        v-model="infoval"
        style="width: 160px"
        placeholder="请选择"
        clearable
        @change="testChange($event)"
      >
        <el-option
          v-for="item in testInfor"
          :key="item.examinationId"
          :label="item.examinationName"
          :value="item.examinationId"
        >
        </el-option>
      </el-select>
      &nbsp; &nbsp; &nbsp; &nbsp;
      <el-button type="primary" :disabled="infoval == ''" @click="queryList()">
        刷新
      </el-button>
      &nbsp; &nbsp;
      <el-button type="primary" :disabled="infoval == ''" @click="pushImg()">
        图像下发
      </el-button>
    </div>
    <div class="content">
      <ul v-for="(item, i) in datalist" :key="i">
        <li>
          <img
            :src="
              item.studentIdCard != null || item.studentIdCard != undefined
                ? `http://117.160.141.22:6085/platform/management/faceImage/${item.studentIdCard}.jpg`
                : srcimg
            "
            @error="imgExists($event)"
          />
          <h3>数据库图片</h3>
        </li>
        <li>
          <img
            :src="
              item.imageDetection != undefined
                ? `http://117.160.141.22:6085/platform/management/faceDetection/${item.imageDetection}`
                : srcimg
            "
            @error="imgExists($event)"
          />
          <h3>抓拍图片</h3>
        </li>
        <li>
          <div class="tg" :class="{ read: item.imageDetection == undefined }">
            <span v-if="item.imageDetection !== undefined">验证<br />通过</span>
            <span v-else>验证<br />未通过</span>
          </div>
          <h3>人脸验证</h3>
        </li>
        <li>
          <h3>考试信息</h3>
          <div
            class="namex"
            :class="{ namex2: item.imageDetection !== undefined }"
          >
            <dd>
              <p>姓 名</p>
              <h4>{{ item.studentName }}</h4>
            </dd>
            <dd>
              <p>机 位</p>
              <h4>{{ item.equipmentName }}</h4>
            </dd>
            <dd>
              <p>考试名称</p>
              <h4>{{ item.examinationName }}</h4>
            </dd>
          </div>
        </li>
      </ul>
    </div>
    <el-pagination
      v-show="total > 6"
      background
      layout="prev, pager, next"
      :page-size="6"
      :total="total"
      @current-change="pageQuery"
    >
    </el-pagination>
  </div>
</template>
<script>
import { api1, querytreeFloor, queryeroom, pushDri, pushDris } from "@/api";
// import Qs from 'qs';
export default {
  name: "Adinfo",
  data() {
    return {
      datalist: [],
      SetKesDept: {
        value: "id",
        label: "title",
      },
      classroom: "",
      infoval: "",
      total: 0,
      options: [],
      srcimg: require("../../assets/moren.png"),
      page: 1,
      testInfor: [],

      queryList(examinationId = this.infoval, page = this.page) {
        // 调用api接口，并且提供了两个参数
        if (this.infoval) {
          api1({
            examinationId,
            limit: 6,
            page,
            usersId: localStorage.getItem("usersId"),
          })
            .then((res) => {
              this.datalist = res.data;
              this.total = res.count;
            })
            .catch((error) => {
              // error
              console.log(error);
            });
        }
      },
    };
  },
  mounted() {
    querytreeFloor()
      .then((res) => {
        this.options = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  watch: {
    infoval: function (val, oldVal) {
      console.log(val, oldVal);

      val && this.init(val);
    },
  },
  destroyed() {},
  activated() {
    if (this.classroom) {
      queryeroom({
        roomId: this.classroom[1],
        usersId: localStorage.getItem("usersId"),
      }).then((res) => {
        this.testInfor = res.data;
        if (!res.data[0]) {
          this.datalist = [];
          this.infoval = "";
        }
      });
    }
    if (this.infoval) {
      this.queryList();
    }
  },
  methods: {
    init(val) {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持webSocket");
      } else {
        // 实例化socket
        this.socket = new WebSocket(
          "ws://117.158.147.214:6085/platform/identify/api/websocket/" + val
        );
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
        this.socket.onclose = this.websocketclose;
      }
    },
    open: function () {
      console.log("socket连接成功");
    },
    error: function () {
      console.log("连接错误");
    },
    getMessage: function (msg) {
      let data = JSON.parse(msg.data);
      console.log(data);
      // if(data.type == "faceRecognition"){

      // }
    },
    websocketclose() {
      console.log("断开连接");
    },

    elect(value) {
      queryeroom({
        roomId: value[1],
        usersId: localStorage.getItem("usersId"),
      }).then((res) => {
        this.testInfor = res.data;
      });
    },

    testChange(val) {
      console.log(val);
      if (val) {
        this.infoval = val;
        this.queryList();
      }
    },
    pageQuery(val) {
      this.page = val;
      this.queryList();
    },
    imgExists(e) {
      //默认图片
      var imgUrl = require("../../assets/jzsb.png");
      var img = e.srcElement;
      img.src = imgUrl;
      //判断图片大小是否大于0 或者 图片高度与宽度都大于0
      if (img.filesize > 0 || (img.width > 0 && img.height > 0)) {
        e.src = imgUrl;
      } else {
        //默认图片也不存在的时候
      }
    },
    pushImg() {
      if (this.infoval) {
        pushDri({ examinationId: this.infoval })
          .then((res) => {
            console.log(res);
            if (res.result_code == 200) {
              this.$message.success("下发成功");
            }
          })
          .catch((err) => {
            console.log(err);
          });
        pushDris({ examinationId: this.infoval }).then((res) => {
          console.log(res);
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.selectr {
  text-align: left;
  font-size: 16px;
  text-indent: 5px;
  padding-bottom: 10px;
  // border-bottom: 1px solid #bbb;
  box-shadow: 0px 5px 5px -5px #666;
  margin-bottom: 20px;
}
.info {
  line-height: normal;
  text-align: left;
  .title {
    border-bottom: 2px solid #666;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    font-weight: bold;
  }
  .content {
    min-width: 1170px;
    min-height: 550px;
    ul {
      box-sizing: border-box;
      display: flex;
      width: 49%;
      float: left;
      flex: 0 0 49%;
      box-sizing: border-box;
      max-height: 220px;
      height: 155px;
      background: white;
      box-shadow: 3px 3px 5px #7775;
      margin-bottom: 15px;
      &:nth-child(odd) {
        margin-right: 23px;
      }
      li {
        flex: 1;
        text-align: center;
        padding: 10px;
        padding-bottom: 0;
        position: relative;
        h3 {
          font-size: 14px;
          font-weight: bolder;
          padding: 2px 0;
          margin-top: 15px;
          width: 90%;
          position: absolute;
          left: 50%;
          color: #1db3b3;
          bottom: 10px;
          transform: translateX(-50%);
          border-radius: 15px;
          background: #eee;
          border: 1px solid #ddd;
        }
        img {
          width: 85px;
          height: 100px;
          margin: 0 auto;
        }
        .namex {
          font-size: 15px;
          text-align: left;
          dd {
            line-height: 1.9em;
            border: 1px solid #ddd;
            border-top: none;
            box-sizing: border-box;
            display: flex;
            color: #777;
          }
          dd:first-child {
            border-top: 1px solid #ddd;
          }
          p {
            display: inline-block;
            width: 66px;
            text-align: justify;
            text-align-last: justify;
            padding: 2px 10px;
            background-color: #eee;
          }
          h4 {
            padding: 2px 10px;
            padding-left: 15px;
            font-weight: 600;
            color: #ff8f34;
            display: inline-block;
            max-width: 50%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
          }
        }
        .namex2 h4 {
          color: #3a9c6c;
        }

        .tg {
          margin: 5px auto 0;
          width: 90px;
          height: 90px;
          background: #fff;
          border-radius: 50%;
          text-align: center;
          font-size: 20px;
          font-weight: bold;
          position: relative;
          background-color: #3a9c6c;
          span {
            width: 100%;
            font-size: 16px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            letter-spacing: 5px;
          }
        }
        .read {
          background-color: #ff6d51;
        }
      }
      li:nth-child(3) {
        border-right: 1px solid #aaa;
      }
      li:nth-child(4) {
        width: 30%;
        flex: 3;
      }
    }
    // ul:nth-child(odd) {
    //   border-right: 4px double #ffb836;
    // }
  }
}
</style>
